<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 缩放的Line
 * @LastEditTime: 2021-11-17 15:18:28
 * @FilePath: \tianjushi-kanban\src\components\charts\Funnel1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
                {value: 2998, name: 'A'},
                {value: 4987, name: 'B'},
                {value: 6000, name: 'C'},
             ],
    },
    color: {
      default: ['#DCDE14','#DE1435','#06B352'],
      type: Array,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    unit: {
      default: 'un',
      type: String,
    }, 

  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {  
const option = { 
    calculable: true,
    color:props.color,
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '5%',
            right:'35%',
            top: '10%',
            bottom: '10%',
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            label: {
                show: true,
                formatter: "{a|{c}}{c|"+props.unit+"}\n{b|{b}}",
                rich: {
                    a: {
                        color: '#fff',
                        fontSize: props.fontSize
                    },
                    b: {
                       color: '#fff',
                       fontSize: props.fontSize - 2
                    },
                    c: {
                       color: '#ddd',
                       fontSize: props.fontSize - 6
                    }
                }
            },
            labelLine: {
                length: 20,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            data: props.chartdata
        }
    ]
}; 
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>